/* ========================================================================== */
/* LoLLMS WebUI Theme: Warm Amber Variant                                     */
/* Built by ParisNeo, Adapted by AI                                            */
/* ========================================================================== */

/* ========================================================================== */
/* 1. Base Setup: Imports and Tailwind Directives                           */
/* ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================================================== */
/* 2. Root Variables: Colors, Theme Configuration                           */
/* ========================================================================== */

:root {
  /* Theme Meta */
  --lollms-title: LoLLMS;
  --falling-object: "🍁"; /* Customize with emoji or image URL if animation is active */
  --activate-dropping-animation: 0; /* Set to 1 to activate */
  --lollms-welcome-short-message: Welcome to LoLLMS;
  --lollms-welcome-message: Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.;

  /* --- Light Mode Colors - Amber/Warm Tones --- */
  --color-primary: #f59e0b;        /* amber-500 */
  --color-primary-light: #fbbf24; /* amber-400 */
  --color-secondary: #d97706;     /* amber-600 */
  --color-accent: #c2410c;        /* orange-700 */
  --color-light-text: #292524;      /* stone-800 - Base Text */
  --color-light-text-panel: #1c1917; /* stone-900 - Text on lighter panels */
  --color-bg-light: #ffffff;      /* White - Main BG */
  --color-bg-light-tone: #fffbeb; /* amber-50 - Subtle Tone */
  --color-bg-light-panel: #fef3c7; /* amber-100 - Panels */
  --color-bg-light-tone-panel: #fde68a; /* amber-200 - Panel Tones */
  --color-bg-light-code-block: #fffbeb; /* amber-50 - Code Blocks */
  --color-bg-light-discussion: #fafaf9; /* stone-50 - Discussion BG */
  --color-bg-light-discussion-odd: #fffbeb; /* amber-50 - Alt Discussion BG */

  /* --- Dark Mode Colors - Dark Brown/Stone with Amber Accents --- */
  --color-dark-text: #e7e5e4;      /* stone-200 - Base Text */
  --color-dark-text-panel: #e7e5e4; /* stone-200 - Text on Panels */
  --color-bg-dark: #1c1917;        /* stone-900 - Main Dark BG */
  --color-bg-dark-tone: #292524;    /* stone-800 - Subtle Tone */
  --color-bg-dark-panel: #44403c;   /* stone-700 - Panels */
  --color-bg-dark-tone-panel: #292524; /* stone-800 - Panel Tones */
  --color-bg-dark-code-block: #292524; /* stone-800 - Code Blocks */
  --color-bg-dark-discussion: #262626; /* neutral-800 (Slightly different dark) - Discussion BG */
  --color-bg-dark-discussion-odd: #1c1917; /* stone-900 - Alt Discussion BG (Same as main) */

  /* --- Accent Colors (Keep Status Colors, Adjust Others) --- */
  --color-accent-sky-light: #fb923c; /* orange-400 (Replaced sky blue) */
  --color-accent-sky-dark: #f97316; /* orange-500 (Replaced sky blue) */
  --color-green-light: #22c55e;   /* green-500 */
  --color-green-dark: #16a34a;    /* green-600 */
  --color-red-light: #ef4444;      /* red-500 */
  --color-red-dark: #dc2626;       /* red-600 */
  --color-yellow-light: #eab308;  /* yellow-500 (Keep distinct yellow or use amber-400?) */
  --color-yellow-dark: #ca8a04;   /* yellow-600 (Keep distinct yellow or use amber-500?) */
  --color-purple-light: #a855f7;  /* purple-500 */
  --color-purple-dark: #9333ea;   /* purple-600 */
}

/* ========================================================================== */
/* 3. Base HTML Elements: HTML, Body                                        */
/* ========================================================================== */

@layer base {
  html {
    @apply scroll-smooth;
  }
  body {
    font-family: 'Inter', 'Roboto', sans-serif; /* Added Inter with fallback */
    /* Base background and text colors */
    @apply bg-[color:var(--color-bg-light)] dark:bg-[color:var(--color-bg-dark)] min-h-screen text-base text-[color:var(--color-light-text)] dark:text-[color:var(--color-dark-text)];
  }
}

/* ========================================================================== */
/* 4. Typography: Headings, Paragraphs, Lists                               */
/* ========================================================================== */

/* Headings */
h1 { @apply text-4xl md:text-5xl font-bold text-[color:var(--color-primary)] dark:text-amber-100 mb-6 border-b border-amber-200 dark:border-stone-700 pb-2; }
h2 { @apply text-3xl font-semibold text-[color:var(--color-accent)] dark:text-amber-200 mb-4 border-b border-amber-200 dark:border-stone-700 pb-2; }
h3 { @apply text-2xl font-medium text-amber-700 dark:text-stone-300 mb-3; }
h4 { @apply text-xl font-medium text-amber-600 dark:text-stone-400 mb-2; }

/* Paragraphs */
p {
  @apply text-base text-stone-700 dark:text-stone-300 /* Explicit text colors */
         break-words font-sans antialiased tracking-tight leading-relaxed;
}
@screen md {
  p { @apply text-lg leading-loose; }
}

/* Lists */
ul, ol {
  @apply my-4 px-4 leading-7 text-base;
}
ul {
  @apply list-disc ml-2 space-y-2;
}
ol {
  @apply list-decimal ml-2 space-y-2;
}
li {
  @apply pl-2 relative;
}
ul ul, ol ol, ul ol, ol ul {
  @apply mt-2 mb-0 ml-6;
}
li::marker {
  @apply text-stone-500 dark:text-stone-500; /* Consistent marker color */
}

/* ========================================================================== */
/* 5. Layout Containers & Panels                                            */
/* ========================================================================== */

.background-color {
  @apply bg-gradient-to-br from-[color:var(--color-bg-light-tone)] to-[color:var(--color-bg-light-panel)]
         dark:from-[color:var(--color-bg-dark)] dark:to-[color:var(--color-bg-dark-tone)] min-h-screen;
}

.toolbar-color {
  @apply text-[color:var(--color-primary)] dark:text-[color:var(--color-dark-text)]
         bg-[color:var(--color-bg-light-panel)] dark:bg-[color:var(--color-bg-dark-tone)] rounded-lg shadow-md;
}

.panels-color {
  @apply text-[color:var(--color-light-text)] dark:text-[color:var(--color-dark-text)]
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-tone)]; /* Standard panel color */
}

.unicolor-panels-color { /* Panels with a single, slightly darker tone */
  @apply bg-[color:var(--color-bg-light-tone-panel)] dark:bg-[color:var(--color-bg-dark-panel)];
}

.chatbox-color {
  @apply bg-[color:var(--color-bg-light-discussion)] dark:bg-[color:var(--color-bg-dark-tone)]; /* Using tone for chatbox BG */
}

.navbar-container {
  @apply text-[color:var(--color-primary)] dark:text-[color:var(--color-dark-text)]
         bg-[color:var(--color-bg-light-panel)] dark:bg-[color:var(--color-bg-dark-tone)] rounded shadow-lg;
}

/* Game Menu container (Used for Main Nav) */
.game-menu {
  @apply flex justify-center items-center relative;
}

/* ========================================================================== */
/* 6. Forms & Inputs                                                        */
/* ========================================================================== */

/* Base Input Styles */
textarea, input:not([type='range']):not([type='checkbox']):not([type='radio']), select {
  @apply bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         text-stone-900 dark:text-[color:var(--color-dark-text)]
         border border-amber-300 dark:border-stone-600 rounded
         focus:ring-[color:var(--color-primary)] dark:focus:ring-[color:var(--color-accent-sky-dark)]
         focus:border-[color:var(--color-primary)] dark:focus:border-[color:var(--color-accent-sky-dark)]
         focus:outline-none focus:ring-1; /* Adjusted focus ring */
}

/* General Input Class */
.input {
  @apply block w-full px-3 py-2 rounded-md shadow-sm sm:text-sm disabled:opacity-50
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         border border-amber-300 dark:border-stone-600
         text-stone-900 dark:text-[color:var(--color-dark-text)]
         placeholder-stone-400 dark:placeholder-stone-500
         focus:outline-none focus:ring-1 focus:ring-[color:var(--color-primary)] focus:border-[color:var(--color-primary)]
         dark:focus:ring-[color:var(--color-accent-sky-dark)] dark:focus:border-[color:var(--color-accent-sky-dark)];
}

/* Small Input */
.input-sm {
  @apply input px-2.5 py-1.5 text-sm; /* Reduced padding slightly */
}

/* Label */
.label {
  @apply block text-sm font-medium text-amber-700 dark:text-stone-300 mb-1;
}

/* Search Input */
.search-input {
  @apply w-full border-b-2 border-amber-300 dark:border-stone-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none
         focus:border-[color:var(--color-primary)] dark:focus:border-[color:var(--color-accent-sky-dark)]
         bg-transparent text-amber-800 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400;
}

/* Settings Layout Components */
@layer components {
  .setting-item {
    @apply flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4 py-2;
  }
  .setting-label {
    @apply label md:w-48 flex-shrink-0; /* Uses .label styles */
  }

  /* Toggle Switch Layout */
  .toggle-item {
    @apply flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 py-3 border-t border-amber-200 dark:border-stone-700 mt-2; /* Adjusted padding/margin */
  }
  .toggle-label {
    @apply label !mb-0 flex-grow cursor-pointer mr-4; /* Uses .label styles */
  }
  .toggle-description {
    @apply block text-xs text-amber-600 dark:text-stone-400 font-normal mt-1;
  }

  /* Range Input Specific Styles */
  .range-input {
    @apply h-2 bg-amber-200 dark:bg-stone-600 rounded-lg appearance-none cursor-pointer w-full; /* Adjusted dark BG */
  }
  /* Webkit Thumb */
  input[type='range']::-webkit-slider-thumb,
  .range-input::-webkit-slider-thumb {
    @apply w-5 h-5 bg-[color:var(--color-primary)] dark:bg-[color:var(--color-accent-sky-dark)] rounded-full appearance-none cursor-pointer transition-colors duration-200 ease-in-out;
    margin-top: -6px; /* Adjust thumb position */
  }
  /* Firefox Thumb */
  input[type='range']::-moz-range-thumb,
  .range-input::-moz-range-thumb {
    @apply w-5 h-5 bg-[color:var(--color-primary)] dark:bg-[color:var(--color-accent-sky-dark)] rounded-full border-none cursor-pointer transition-colors duration-200 ease-in-out;
  }
   /* Webkit Track */
  input[type='range']::-webkit-slider-runnable-track {
      @apply h-2 bg-amber-200 dark:bg-stone-600 rounded-full w-full;
  }
  /* Firefox Track */
  input[type='range']::-moz-range-track {
      @apply h-2 bg-amber-200 dark:bg-stone-600 rounded-full w-full;
  }
}

/* ========================================================================== */
/* 7. Buttons                                                               */
/* ========================================================================== */

/* Base Button Styles */
button {
  @apply transition-all duration-300 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed;
}
button:not(:disabled):hover {
  @apply transform scale-[1.03]; /* Slightly different hover effect */
}

/* General Button Class */
.btn {
  @apply inline-flex items-center justify-center font-semibold py-2 px-4 rounded-lg transition-all duration-150 ease-in-out shadow-md border border-transparent
         focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-[color:var(--color-bg-dark)] whitespace-nowrap;
}

/* Button Variants */
.btn-primary {
  @apply btn bg-[color:var(--color-primary)] text-white hover:bg-[color:var(--color-secondary)] focus:ring-[color:var(--color-primary-light)];
  /* Dark mode uses same amber */
}
.btn-secondary {
  @apply btn text-amber-700 dark:text-stone-100 bg-amber-100 dark:bg-stone-600
         hover:bg-amber-200 dark:hover:bg-stone-500
         focus:ring-amber-300 dark:focus:ring-stone-500
         border-amber-200 dark:border-stone-500; /* Added subtle border */
}
.btn-success {
  @apply btn bg-[color:var(--color-green-light)] text-white hover:bg-[color:var(--color-green-dark)] focus:ring-green-300;
  /* Dark mode uses same green */
}
.btn-sm {
  @apply py-1.5 px-2.5 text-sm font-medium; /* Adjusted padding/size */
}

/* On/Off Status Buttons (Text Color Only) */
.btn-on{
  @apply text-[color:var(--color-green-light)] dark:text-green-400;
}
.btn-off{
  @apply text-[color:var(--color-red-light)] dark:text-red-400;
}

/* SVG Buttons (e.g., chat bar controls, toolbar icons) */
.svg-button {
  @apply inline-flex items-center justify-center text-stone-600 dark:text-stone-300 p-1.5 rounded-full transition-colors duration-200 ease-in-out
         hover:bg-stone-200 dark:hover:bg-stone-700
         focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[color:var(--color-accent-sky-dark)] dark:ring-offset-[color:var(--color-bg-dark-tone)];
}
.svg-button:active{
  @apply bg-stone-300 dark:bg-stone-600;
}

/* Navigation Buttons (Main Menu) */
.nav-button {
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out
         text-stone-700 dark:text-stone-300
         hover:bg-stone-100 dark:hover:bg-stone-700;
}
.nav-button-active {
  @apply nav-button bg-[color:var(--color-primary)] text-white hover:bg-[color:var(--color-secondary)]
         dark:bg-[color:var(--color-primary)] dark:hover:bg-[color:var(--color-secondary)]; /* Keep primary amber for active */
}

/* Toolbar Buttons (e.g., message hover toolbar) */
.toolbar-button {
  @apply bg-transparent border-none cursor-pointer p-1.5 rounded transition-colors duration-200
         text-stone-600 dark:text-stone-400
         hover:text-[color:var(--color-primary)] dark:hover:text-[color:var(--color-accent-sky-light)];
}

/* Tab Buttons (e.g., Playground) */
@layer components {
  .active-tab-button {
    @apply btn btn-primary btn-sm; /* Uses primary amber */
    @apply ring-2 ring-offset-1 ring-offset-[color:var(--color-bg-light-tone)] dark:ring-offset-[color:var(--color-bg-dark)] ring-[color:var(--color-primary)] dark:ring-[color:var(--color-primary)];
  }
  .inactive-tab-button {
    @apply btn btn-secondary btn-sm; /* Uses secondary (stone) style */
    @apply opacity-70 hover:opacity-100; /* Dim inactive */
  }
}

/* Code Block Buttons (Execute, Copy etc.) */
.code-block-button {
  @apply p-1 rounded text-gray-600 dark:text-gray-300 /* Keep neutral gray for icons */
         hover:bg-[color:var(--color-primary)] dark:hover:bg-[color:var(--color-primary)] hover:text-white
         transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-[color:var(--color-primary)]
         disabled:opacity-50 disabled:cursor-not-allowed
         disabled:hover:bg-transparent disabled:hover:text-gray-600 dark:disabled:hover:text-gray-300;
}
.code-block-button i[data-feather], .code-block-button img { vertical-align: middle; }
.execute-button { @apply inline-flex items-center justify-center; }

/* ========================================================================== */
/* 8. Messages & Chat Interface                                             */
/* ========================================================================== */

/* Message Bubble */
.message {
  @apply relative w-full m-2 shadow-lg rounded-lg border
         border-amber-200 dark:border-stone-700 /* Subtle border */
         flex flex-col overflow-visible p-4 /* Adjusted padding */
         bg-[color:var(--color-bg-light-discussion-odd)] dark:bg-[color:var(--color-bg-dark-discussion-odd)] /* Use odd color as base */
         text-stone-900 dark:text-[color:var(--color-dark-text)]
         transition-colors duration-200;
  padding-bottom: 2.8rem; /* Ensure space for toolbar */
}
.message:hover {
  @apply border-amber-300 dark:border-[color:var(--color-accent-sky-light)];
}

/* Message Alternating Backgrounds */
.message:nth-child(even) {
  @apply bg-[color:var(--color-bg-light-discussion)] dark:bg-[color:var(--color-bg-dark-discussion)];
}

/* Message Header, Content, Footer */
.message-header {
  @apply text-lg font-semibold mb-2 text-amber-800 dark:text-stone-100;
}
.message-content {
  @apply text-base leading-relaxed text-stone-700 dark:text-stone-300;
}
.message-footer {
  @apply text-xs text-amber-700 dark:text-stone-400 mt-3 pt-2 border-t border-amber-100 dark:border-stone-700 flex flex-wrap gap-x-3 gap-y-1; /* Adjusted styling */
}
.footer-item {
  @apply text-stone-600 dark:text-stone-400;
}
.footer-value {
  @apply font-medium text-stone-700 dark:text-stone-300 ml-1; /* Added margin */
}

/* Message Hover Toolbar */
.message-toolbar-wrapper { /* Exists for positioning context if needed, often identical to footer */
  @apply flex flex-row justify-end items-center mt-1 mx-2; /* Can be removed if footer handles layout */
}
.message-toolbar {
  @apply absolute bottom-1.5 right-1.5 /* Adjusted position */
         invisible group-hover:visible flex flex-row items-center gap-1
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)] /* Use panel colors */
         backdrop-blur-sm rounded-md p-1 shadow-md; /* Added blur */
}

/* Discussion List Item */
.discussion {
  @apply mr-2 p-2 rounded-md transition-colors duration-150 cursor-pointer
         text-sm text-stone-700 dark:text-stone-300 /* Adjusted size/color */
         hover:bg-amber-100 dark:hover:bg-stone-700;
}
.discussion-hilighted {
  @apply discussion bg-amber-200 dark:bg-stone-600 /* Use secondary button colors */
         text-stone-800 dark:text-stone-100 font-medium;
}

/* Discussion Toolbox (appears on hover) */
.discussion-toolbox{
  @apply flex gap-1 items-center bg-white dark:bg-stone-800 p-1 rounded-l-md shadow-md
         transform translate-x-full group-hover:translate-x-0 transition-transform duration-300;
}

/* Chat Input Bar */
.chat-bar {
  @apply relative flex grow items-center gap-2 p-1 shadow-sm transition-all duration-300 ease-in-out
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-tone)]
         border-t border-amber-200 dark:border-stone-700
         text-amber-700 dark:text-stone-300
         hover:shadow-md dark:hover:bg-stone-700; /* Darken on hover */
  min-height: 50px; /* Ensure minimum height */
}

/* ========================================================================== */
/* 9. Navigation & Menus                                                    */
/* ========================================================================== */

/* Main Menu Item (Game Menu Style) */
.menu-item {
  @apply relative mb-2 px-4 py-2 text-amber-700 dark:text-stone-300 font-bold text-lg transition-all duration-300 ease-in-out
         hover:text-amber-800 hover:dark:text-stone-100 hover:transform hover:-translate-y-1;
}
.menu-item.active-link {
  @apply text-amber-800 dark:text-stone-100 scale-105; /* Apply base and enhance */
  text-shadow: 0 0 8px rgba(128, 128, 128, 0.4); /* Subtle shadow */
  /* No dark mode text shadow override needed unless explicitly desired */
}

/* Active Link Underline/Shimmer Effect */
.menu-item.active-link::before {
  content: '';
  position: absolute;
  bottom: -4px; /* Adjusted position */
  left: 10%; /* Indent slightly */
  width: 80%;
  height: 4px; /* Thinner line */
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), var(--color-primary), transparent);
  background-size: 200% 100%; /* For animation */
  border-radius: 10px;
  animation: shimmer 3s linear infinite; /* Slower shimmer */
}
.dark .menu-item.active-link::before {
  background: linear-gradient(90deg, transparent, var(--color-accent-sky-light), var(--color-dark-text), var(--color-accent-sky-light), transparent); /* Dark mode gradient */
  background-size: 200% 100%;
}


/* Context Menu (Amber Themed) */
@layer components {
  .context-menu {
    @apply absolute bg-amber-100/90 dark:bg-stone-900/90 border border-amber-500 dark:border-amber-400
           shadow-lg shadow-amber-500/40 dark:shadow-amber-400/40 rounded-md /* Changed to rounded-md */
           py-1 min-w-[160px] z-[1000] font-mono backdrop-blur-sm; /* Added blur */
  }

  /* Optional Matrix Rain Effect (Disabled by default - Keep or adapt?) */
  /*
  .context-menu::before {
    @apply content-[''] absolute inset-0 bg-gradient-to-b from-amber-500/10 via-amber-500/5 to-transparent bg-[length:100%_1000px] opacity-30 -z-10;
    animation: matrix-rain 10s linear infinite; // If kept, rename animation or change colors
  }
  */

  .context-menu-item {
    @apply relative flex items-center px-3 py-1.5 text-sm text-amber-700 dark:text-amber-400 /* Adjusted colors/padding */
           cursor-pointer transition-all duration-200 ease-in-out
           hover:bg-amber-500/20 hover:scale-[1.02] hover:text-amber-800 dark:hover:text-amber-300; /* Adjusted hover */
  }

  .context-menu-separator {
    @apply h-px bg-amber-400 dark:bg-amber-500 my-1 mx-2; /* Adjusted margin/color */
  }

  .context-menu-item-disabled {
    @apply context-menu-item text-amber-500/60 dark:text-amber-600/70 cursor-not-allowed hover:bg-transparent hover:scale-100; /* Adjusted disabled style */
  }

  .context-menu-item-icon {
    @apply mr-2.5 text-amber-600 dark:text-amber-400 inline-block w-4 h-4; /* Sized icon */
  }

  /* Hover effect line */
  .context-menu-item::after {
    @apply content-[''] absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-transparent via-amber-500 dark:via-amber-400 to-transparent scale-x-0 origin-center transition-transform duration-300 ease-in-out;
  }
  .context-menu-item:hover::after {
    @apply scale-x-100;
  }
}


/* ========================================================================== */
/* 10. Cards & Specific Containers                                          */
/* ========================================================================== */

/* General Card */
.card {
  @apply bg-[color:var(--color-bg-light)] dark:bg-[color:var(--color-bg-dark-panel)] /* Use panel color */
         rounded-lg shadow-md p-4 border border-amber-100 dark:border-stone-700 /* Softer border */
         text-stone-800 dark:text-[color:var(--color-dark-text)];
}

/* Interesting Facts Box */
.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-white/80 dark:bg-stone-800/80 backdrop-blur-sm rounded-lg shadow-lg transition-transform duration-200 hover:scale-[1.02]; /* Added blur, softer hover */
}

/* App Card (for Extensions/Models etc.) */
.app-card {
  @apply transition-all duration-300 ease-in-out
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         text-amber-800 dark:text-[color:var(--color-dark-text)]
         border border-amber-200 dark:border-stone-700
         rounded-xl shadow-lg p-5 hover:shadow-xl; /* Adjusted padding */
}
.app-card:hover {
  @apply transform -translate-y-1 dark:bg-stone-600; /* Darken on hover */
}

/* User Settings Panel */
.user-settings-panel {
  @apply bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         space-y-5 p-4 md:p-6 rounded-lg shadow-md
         text-stone-900 dark:text-[color:var(--color-dark-text)];
}

/* Folder Items (File Browser) */
.folder-item-base {
  @apply flex flex-col items-center justify-center p-3 rounded-lg cursor-pointer transition-all duration-200 /* Added group */
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-tone)]
         border border-transparent dark:border-stone-700 /* Default border */
         hover:shadow-md hover:bg-amber-100 dark:hover:bg-stone-700; /* Consistent hover */
}
.folder-item-icon {
  @apply w-10 h-10 group-hover:scale-110 transition-transform duration-200 mb-1; /* Reduced margin */
}
.folder-item-label {
  @apply mt-1 text-xs text-center text-amber-700 dark:text-stone-300 break-words w-full px-1; /* Allow wrapping */
}

/* Folder Item Type Specific Borders/Icons (Keep original accent colors) */
.folder-item-personalities { @apply border-blue-400 dark:border-blue-500; } /* Keep blue for personalities */
.folder-item-icon-personalities { @apply text-blue-500 dark:text-blue-400; }
.folder-item-functions { @apply border-green-500 dark:border-green-400; }
.folder-item-icon-functions { @apply text-green-500 dark:text-green-400; }
.folder-item-configs { @apply border-yellow-500 dark:border-yellow-400; } /* Yellow fits */
.folder-item-icon-configs { @apply text-yellow-500 dark:text-yellow-400; }
.folder-item-outputs { @apply border-purple-500 dark:border-purple-400; }
.folder-item-icon-outputs { @apply text-purple-500 dark:text-purple-400; }
.folder-item-discussions { @apply border-red-500 dark:border-red-400; }
.folder-item-icon-discussions { @apply text-red-500 dark:text-red-400; }

/* ========================================================================== */
/* 11. Visual Styles & Effects                                              */
/* ========================================================================== */

/* Gradients */
.bg-gradient-welcome {
  @apply bg-gradient-to-br from-[color:var(--color-bg-light-tone)] to-[color:var(--color-bg-light-panel)]
         dark:from-[color:var(--color-bg-dark)] dark:to-[color:var(--color-bg-dark-tone)];
}
.bg-gradient-progress {
  @apply bg-gradient-to-r from-amber-200 to-amber-300 dark:from-stone-700 dark:to-stone-600;
}

/* Text Styles */
.text-gradient-title {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-amber-400 dark:from-[color:var(--color-accent-sky-light)] dark:to-[color:var(--color-accent-sky-dark)]; /* Adjusted dark gradient */
}
.lollms-title-style { /* Specific orange/yellow gradient for LoLLMS text - Already fits! */
  text-shadow: none;
  background: linear-gradient(45deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.dark .lollms-title-style {
  text-shadow: none; /* Explicitly remove shadow in dark mode */
}
.text-subtitle {
  @apply text-amber-600 dark:text-stone-400;
}
.text-author {
  @apply text-amber-500 dark:text-stone-400;
}
.text-loading {
  @apply text-amber-700 dark:text-stone-300;
}
.text-progress {
  @apply text-amber-600 dark:text-stone-400;
}
.link {
  @apply text-amber-600 hover:text-amber-800 dark:text-[color:var(--color-accent-sky-light)] dark:hover:text-orange-300 underline transition-colors; /* Added underline */
}

/* Custom Text Shadow (Subtle Outline) */
.text-shadow-custom {
  text-shadow: 1px 1px 0px #fef3c7, -1px -1px 0px #fef3c7, 1px -1px 0px #fef3c7, -1px 1px 0px #fef3c7; /* Lighter shadow (amber-100) */
}

/* Feather Emoji Bounce */
.feather-emoji {
  display: inline-block;
  margin-left: 5px;
  animation: bounce 2s infinite ease-in-out; /* Added easing */
}

/* ========================================================================== */
/* 12. Scrollbars                                                           */
/* ========================================================================== */

/* Tailwind Scrollbar Utility Integration */
.scrollbar {
  @apply scrollbar-thin scrollbar-track-amber-100 scrollbar-thumb-amber-300 hover:scrollbar-thumb-amber-400
         dark:scrollbar-track-stone-700 dark:scrollbar-thumb-stone-500 dark:hover:scrollbar-thumb-stone-400;
}

/* Standalone Scrollbar Class (if needed, matches utility) */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.amber.300') theme('colors.amber.100');
}
.dark .scrollbar-thin {
  scrollbar-color: theme('colors.stone.500') theme('colors.stone.700'); /* Use stone */
}
.scrollbar-thin::-webkit-scrollbar { @apply w-1.5 h-1.5; } /* Thinner scrollbar */
.scrollbar-thin::-webkit-scrollbar-track { @apply bg-amber-100 dark:bg-stone-700 rounded-full; }
.scrollbar-thin::-webkit-scrollbar-thumb { @apply bg-amber-300 dark:bg-stone-500 rounded-full border-2 border-solid border-transparent bg-clip-content; } /* Added border for padding effect */
.scrollbar-thin::-webkit-scrollbar-thumb:hover { @apply bg-amber-400 dark:bg-stone-400; }

/* No Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ========================================================================== */
/* 13. Progress Indicators                                                  */
/* ========================================================================== */

/* Animated Progress Bar */
.animated-progressbar-bg {
  @apply w-full h-4 relative overflow-hidden bg-gradient-to-r from-amber-100 to-orange-100 dark:from-stone-700 dark:to-stone-600 rounded-full shadow-inner; /* Adjusted height/colors */
}
.animated-progressbar-fg {
  @apply absolute top-0 left-0 h-full bg-gradient-to-r from-amber-400 to-orange-400 dark:from-[color:var(--color-accent-sky-dark)] dark:to-orange-500 transition-all duration-500 ease-out rounded-full; /* Smoother transition */
}

/* Steps Component Styling */
@layer components {
    .steps-container {
      @apply border border-amber-200 dark:border-stone-700 rounded-lg mb-4 bg-gradient-to-b from-white/70 to-amber-50/70 dark:from-stone-800/70 dark:to-stone-900/50 shadow-sm overflow-hidden; /* Added transparency */
    }
    .steps-header {
      @apply flex items-center p-3 cursor-pointer border-b border-amber-200 dark:border-stone-700 hover:bg-amber-100/50 dark:hover:bg-stone-700/50 transition-colors duration-200;
    }
    .steps-icon { /* Icon in header */
      @apply mr-3 text-stone-500 dark:text-stone-400 w-5 h-5; /* Adjusted margin/size */
    }
    .steps-status {
      @apply font-medium text-sm text-amber-700 dark:text-stone-300 flex-grow;
    }
    .toggle-icon { /* Chevron icon */
      @apply text-xs text-amber-500 dark:text-stone-400 transition-transform duration-300;
    }
    .toggle-icon i { /* Feather icon size */
        @apply w-4 h-4; /* Smaller chevron */
    }
    .steps-content { /* Content area when expanded */
       @apply p-2 bg-amber-50/30 dark:bg-stone-800/20 border-l-2 border-amber-200 dark:border-stone-600 ml-2 pl-4; /* Adjusted border/padding */
    }

    /* Individual Step Item (Step.vue root) */
    .step-component {
       @apply flex items-start gap-3 p-2 rounded-md border-l-4 transition-all duration-300 ease-in-out my-1; /* Start aligned, gap, margin */
    }

    /* Step Component Status Variants */
    .step-component-pending {
        @apply bg-amber-100/40 dark:bg-stone-800/30 border-[color:var(--color-accent-sky-light)] hover:bg-amber-100/70 dark:hover:bg-stone-700/50;
    }
    .step-component-success {
        @apply bg-green-100/50 dark:bg-green-900/20 border-[color:var(--color-green-light)] dark:border-green-400 hover:bg-green-100/80 dark:hover:bg-green-800/30;
    }
    .step-component-fail {
        @apply bg-red-100/50 dark:bg-red-900/20 border-[color:var(--color-red-light)] dark:border-red-400 hover:bg-red-100/80 dark:hover:bg-red-800/30;
    }

    /* Step Component Inner Elements */
    .step-icon-wrapper {
       @apply flex-shrink-0 w-5 h-5 flex items-center justify-center relative mt-0.5; /* Align with text */
    }
    .step-spinner { /* Spinner for pending */
      @apply w-4 h-4 border-2 border-amber-200 dark:border-stone-600 border-t-[color:var(--color-accent-sky-dark)] rounded-full animate-spin animate-pulse-border;
    }
    .step-icon-success { /* Checkmark */
        @apply w-5 h-5 text-[color:var(--color-green-light)] dark:text-green-400;
    }
    .step-icon-fail { /* X mark */
        @apply w-5 h-5 text-[color:var(--color-red-light)] dark:text-red-400;
    }
    .step-text-content {
        @apply min-w-0 flex-grow;
    }
    .step-text { /* Main step text */
        @apply text-sm font-medium text-stone-700 dark:text-stone-200; /* Removed truncate */
    }
    .step-description { /* Optional description */
        @apply text-xs text-stone-500 dark:text-stone-400 pt-0.5; /* Removed truncate */
    }
}

/* Standalone Status Icons (Used in Step.vue etc.) */
.status-icon { @apply cursor-pointer transition-colors duration-300 inline-block; }
.icon { @apply w-5 h-5; } /* Default size */
.icon-success { @apply icon text-[color:var(--color-green-light)] dark:text-green-400; }
.icon-fail { @apply icon text-[color:var(--color-red-light)] dark:text-red-400; }
.icon-spinner { @apply icon border-2 border-amber-300 dark:border-stone-500 border-t-[color:var(--color-accent-sky-dark)] rounded-full animate-spin; }
.icon-text { @apply text-lg font-semibold text-gray-700 dark:text-stone-300; } /* For text-based status */

/* Status Dots */
@layer utilities {
  .status-dot { @apply inline-block w-2.5 h-2.5 rounded-full mr-1.5 align-middle; } /* Base dot */
  .bg-status-healthy { @apply status-dot bg-green-500 dark:bg-green-400; }
  .bg-status-unhealthy { @apply status-dot bg-red-500 dark:bg-red-400; }
  .bg-status-loading { @apply status-dot bg-amber-500 dark:bg-amber-400 animate-pulse; } /* Changed from yellow */
  .bg-status-unknown { @apply status-dot bg-gray-400 dark:bg-gray-500; } /* Keep gray */
}

/* ========================================================================== */
/* 14. Markdown & Prose Styles                                              */
/* ========================================================================== */

/* Base Prose Styles for Message Content ('prose-amber' theme) */
@layer components {
  .prose-amber { /* Renamed from prose-blue */
    h3 { @apply text-lg font-semibold text-amber-700 dark:text-stone-300 mb-2 mt-4 border-b border-amber-100 dark:border-stone-700 pb-1; } /* Adjusted size/margins */
    ul { @apply list-disc pl-5 space-y-1 mb-3 text-stone-700 dark:text-stone-300; } /* Adjusted color/padding */
    ol { @apply list-decimal pl-5 space-y-1 mb-3 text-stone-700 dark:text-stone-300; }
    li::marker { color: theme('colors.amber.500'); @apply dark:text-stone-500; }
    code:not(pre code) { @apply bg-amber-100 dark:bg-stone-700 px-1 py-0.5 rounded text-xs font-mono text-amber-700 dark:text-orange-300; } /* Adjusted size/dark color */
    blockquote { @apply border-l-4 border-amber-300 dark:border-stone-600 pl-3 italic text-amber-600 dark:text-stone-400 my-3 py-0.5; } /* Adjusted padding/colors */
    a { @apply link font-medium; } /* Inherits .link style */
    p { @apply mb-3 leading-relaxed text-stone-700 dark:text-stone-300; } /* Uses default P */
    pre { @apply my-4; } /* Add margin to pre blocks */
    pre code.hljs { @apply p-3 rounded-md shadow-inner text-sm; } /* Style the code block itself */
    img { @apply rounded-md shadow my-3 max-w-full h-auto dark:opacity-95; } /* Style images */
    table { @apply w-full my-3 border-collapse border border-amber-200 dark:border-stone-700 text-sm; }
    th { @apply bg-amber-50 dark:bg-stone-700 p-2 border border-amber-200 dark:border-stone-600 text-left font-semibold text-amber-800 dark:text-stone-200; }
    td { @apply p-2 border border-amber-200 dark:border-stone-600 text-stone-700 dark:text-stone-300; }
  }

  /* Thinking Prose Styles (Minimalistic for AI thinking process) */
  /* NOTE: Requires the @tailwindcss/typography plugin to be installed and configured */
  .thinking-prose {
    @apply prose prose-sm max-w-none dark:prose-invert;
    /* Override Tailwind Prose defaults */
    @apply prose-headings:text-stone-700 dark:prose-headings:text-stone-300 prose-headings:font-semibold prose-headings:mt-4 prose-headings:mb-1;
    @apply prose-p:text-stone-600 dark:prose-p:text-stone-400 prose-p:my-1.5;
    @apply prose-ul:text-stone-600 dark:prose-ul:text-stone-400 prose-ul:my-1.5 prose-ul:pl-4;
    @apply prose-ol:text-stone-600 dark:prose-ol:text-stone-400 prose-ol:my-1.5 prose-ol:pl-4;
    @apply prose-li:my-0.5;
    @apply prose-li:marker:text-stone-400 dark:prose-li:marker:text-stone-500;
    /* Use orange for code to stand out slightly */
    @apply prose-code:text-orange-700 dark:prose-code:text-orange-300 prose-code:bg-stone-100 dark:prose-code:bg-stone-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-xs prose-code:font-mono;
    @apply prose-pre:bg-stone-100 dark:prose-pre:bg-stone-800 prose-pre:p-2 prose-pre:rounded prose-pre:my-2 prose-pre:text-xs prose-pre:shadow-inner;
    @apply prose-blockquote:border-l-4 prose-blockquote:border-stone-300 dark:prose-blockquote:border-stone-600 prose-blockquote:pl-3 prose-blockquote:italic prose-blockquote:text-stone-500 dark:prose-blockquote:text-stone-500 prose-blockquote:my-2 prose-blockquote:py-0.5;
    /* Use orange for links */
    @apply prose-a:text-orange-600 dark:prose-a:text-orange-400 hover:prose-a:underline;
    /* Custom Scrollbar */
    @apply scrollbar;
    scroll-behavior: smooth;
  }
} /* End of @layer components for prose */


/* Help Content Styling (Similar to prose-amber but uses .help-content class) */
.help-content {
  @apply text-stone-800 dark:text-stone-200;
}
.help-content h2 { @apply text-2xl font-semibold text-amber-700 dark:text-stone-200 mb-4 mt-6 border-b border-amber-200 dark:border-stone-700 pb-2; }
.help-content h3 { @apply text-xl font-semibold text-amber-600 dark:text-stone-300 mb-3 mt-5; }
.help-content ul { @apply list-disc pl-6 space-y-1.5 mb-4 text-stone-700 dark:text-stone-300; }
.help-content ol { @apply list-decimal pl-6 space-y-1.5 mb-4 text-stone-700 dark:text-stone-300; }
.help-content li::marker { @apply text-amber-500 dark:text-stone-500; }
.help-content code:not(pre code) { @apply bg-amber-100 dark:bg-stone-700 px-1.5 py-0.5 rounded text-sm font-mono text-amber-700 dark:text-orange-300; }
.help-content pre.hljs { @apply bg-amber-50 dark:bg-stone-800/80 p-4 rounded-lg overflow-x-auto my-4 shadow-inner text-sm; }
.help-content pre.hljs code { @apply bg-transparent p-0; }
.help-content blockquote { @apply border-l-4 border-amber-400 dark:border-stone-500 pl-4 italic text-amber-600 dark:text-stone-400 my-4 py-1; }
.help-content p { @apply mb-4 leading-relaxed text-stone-700 dark:text-stone-300 text-base md:text-lg; }
.help-content img { @apply rounded-lg shadow-md my-4 max-w-full h-auto mx-auto dark:opacity-90; }
.help-content table { @apply w-full my-4 border-collapse border border-amber-200 dark:border-stone-700; }
.help-content th { @apply bg-amber-100 dark:bg-stone-800 p-2 border border-amber-200 dark:border-stone-700 text-left font-semibold text-amber-800 dark:text-stone-200; }
.help-content td { @apply p-2 border border-amber-200 dark:border-stone-700 text-stone-800 dark:text-stone-300; }
/* Help Sidebar Responsiveness */
@media (max-width: 768px) {
 .help-left-bar { @apply fixed top-0 left-0 h-screen z-20 transform -translate-x-full; }
 .help-main-content { @apply ml-0; }
 .help-left-bar.open { @apply translate-x-0; }
}
/* ========================================================================== */
/* 15. Code Execution & Editor Styling                                      */
/* ========================================================================== */

/* CodeMirror Editor Base */
.cm-editor-wrapper { @apply relative; }
.cm-editor-wrapper.editing-border { @apply ring-1 ring-[color:var(--color-primary)]; } /* Use ring for border */
.cm-editor { @apply h-full max-h-96 min-h-[3em] text-sm; } /* Adjusted max-height, text size */
.cm-scroller { @apply overflow-auto scrollbar; } /* Added custom scrollbar */
.cm-editor .cm-gutters { @apply select-none bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700; } /* Gutter styling */
.cm-editor .cm-content { @apply whitespace-pre-wrap break-words; } /* Allow wrapping */
.cm-editor .cm-line { @apply px-1; } /* Line padding */

/* Search/Replace Panel within CodeMirror */
.search-replace-panel {
  @apply border-b border-gray-300 dark:border-gray-600 p-1 flex items-center gap-1 bg-stone-100 dark:bg-stone-700; /* Layout */
}
.search-replace-panel input[type="text"] {
  @apply px-1.5 py-0.5 border border-gray-300 dark:border-gray-500 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-xs
         focus:outline-none focus:ring-1 focus:ring-[color:var(--color-primary)] focus:border-[color:var(--color-primary)] min-w-[80px];
}
.search-replace-panel .search-status {
  @apply text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap px-1 min-w-[50px] text-center;
}
.search-replace-panel .search-button { /* Individual search action buttons */
  @apply p-0.5 text-xs code-block-button; /* Use code-block-button style */
}
.search-replace-panel .search-button i[data-feather] { @apply w-3.5 h-3.5; }
.active-search-button { /* Highlight active search option */
  @apply bg-[color:var(--color-primary)] text-white hover:bg-[color:var(--color-primary)];
}

/* Code Execution Output Area */
.execution-output-content {
  @apply p-3 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded mt-2 text-sm text-stone-800 dark:text-stone-200 scrollbar;
  max-height: 300px; /* Limit height */
  overflow-y: auto;
}
/* Basic HTML elements within Execution Output */
.execution-output-content a { @apply text-amber-600 dark:text-orange-400 hover:underline; } /* Amber/Orange Link */
.execution-output-content h1,
.execution-output-content h2,
.execution-output-content h3,
.execution-output-content h4,
.execution-output-content h5,
.execution-output-content h6 { @apply font-semibold my-1 text-stone-900 dark:text-stone-100; }
.execution-output-content h1 { @apply text-lg border-b border-stone-200 dark:border-stone-700 pb-1 mb-1.5; }
.execution-output-content h2 { @apply text-base; }
.execution-output-content h3 { @apply text-sm; }
.execution-output-content p { @apply my-1 leading-normal; }
.execution-output-content ul { @apply list-disc list-inside ml-4 my-1 space-y-0.5; }
.execution-output-content ol { @apply list-decimal list-inside ml-4 my-1 space-y-0.5; }
.execution-output-content code:not(pre > code) { @apply font-mono bg-stone-100 dark:bg-stone-700 px-1 py-0.5 rounded text-xs text-orange-700 dark:text-orange-300; } /* Use orange for inline code */
.execution-output-content pre { @apply font-mono bg-stone-100 dark:bg-stone-700 p-2 rounded my-1 overflow-x-auto text-xs shadow-inner; }
.execution-output-content pre > code { @apply p-0 bg-transparent text-inherit; }
.execution-output-content blockquote { @apply border-l-4 border-stone-300 dark:border-stone-600 pl-2 italic my-1 text-stone-600 dark:text-stone-400 text-sm; }
.execution-output-content table { @apply w-auto max-w-full border-collapse border border-stone-300 dark:border-stone-600 my-2 text-xs; } /* Changed to w-auto */
.execution-output-content th,
.execution-output-content td { @apply border border-stone-300 dark:border-stone-600 p-1 text-left; }
.execution-output-content th { @apply bg-stone-100 dark:bg-stone-700 font-semibold; }
.execution-output-content img { @apply max-w-full h-auto my-1 rounded border border-stone-200 dark:border-stone-700; }
.execution-output-content svg { @apply max-w-full h-auto my-1; }
.execution-output-content hr { @apply border-t border-stone-300 dark:border-stone-600 my-2; }

/* Highlight.js theme override for Execution Output (Inline code, NOT pre blocks) */
/* KEEPING ORIGINAL HLJS THEMES (GitHub Light / Tokyo Night Dark) for better code readability */
.execution-output-content.hljs { background: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important;}
/* Light Mode HLJS (GitHub Light) */
html:not(.dark) .execution-output-content .hljs {color:#24292e}html:not(.dark) .execution-output-content .hljs-meta{color:#6a737d}html:not(.dark) .execution-output-content .hljs-comment{color:#6a737d;font-style:italic}html:not(.dark) .execution-output-content .hljs-tag{color:#22863a}html:not(.dark) .execution-output-content .hljs-tag .hljs-name,html:not(.dark) .execution-output-content .hljs-tag .hljs-attr{color:#22863a}html:not(.dark) .execution-output-content .hljs-keyword,html:not(.dark) .execution-output-content .hljs-selector-tag,html:not(.dark) .execution-output-content .hljs-literal,html:not(.dark) .execution-output-content .hljs-name{color:#d73a49}html:not(.dark) .execution-output-content .hljs-deletion,html:not(.dark) .execution-output-content .hljs-number,html:not(.dark) .execution-output-content .hljs-attribute,html:not(.dark) .execution-output-content .hljs-variable,html:not(.dark) .execution-output-content .hljs-template-variable,html:not(.dark) .execution-output-content .hljs-symbol{color:#005cc5}html:not(.dark) .execution-output-content .hljs-section,html:not(.dark) .execution-output-content .hljs-title,html:not(.dark) .execution-output-content .hljs-type{color:#6f42c1}html:not(.dark) .execution-output-content .hljs-string,html:not(.dark) .execution-output-content .hljs-subst,html:not(.dark) .execution-output-content .hljs-regexp,html:not(.dark) .execution-output-content .hljs-link,html:not(.dark) .execution-output-content .hljs-addition,html:not(.dark) .execution-output-content .hljs-selector-id,html:not(.dark) .execution-output-content .hljs-selector-class{color:#032f62}html:not(.dark) .execution-output-content .hljs-built_in,html:not(.dark) .execution-output-content .hljs-bullet,html:not(.dark) .execution-output-content .hljs-code,html:not(.dark) .execution-output-content .hljs-formula{color:#e36209}html:not(.dark) .execution-output-content .hljs-emphasis{font-style:italic}html:not(.dark) .execution-output-content .hljs-strong{font-weight:bold}
/* Dark Mode HLJS (Tokyo Night Dark) */
.dark .execution-output-content .hljs{color:#a9b1d6}.dark .execution-output-content .hljs-meta{color:#ff9e64}.dark .execution-output-content .hljs-comment{color:#565f89;font-style:italic}.dark .execution-output-content .hljs-tag{color:#f7768e}.dark .execution-output-content .hljs-tag .hljs-name,.dark .execution-output-content .hljs-tag .hljs-attr{color:#f7768e}.dark .execution-output-content .hljs-keyword,.dark .execution-output-content .hljs-selector-tag,.dark .execution-output-content .hljs-literal,.dark .execution-output-content .hljs-name{color:#bb9af7}.dark .execution-output-content .hljs-deletion,.dark .execution-output-content .hljs-number,.dark .execution-output-content .hljs-attribute,.dark .execution-output-content .hljs-variable,.dark .execution-output-content .hljs-template-variable,.dark .execution-output-content .hljs-symbol{color:#ff9e64}.dark .execution-output-content .hljs-section,.dark .execution-output-content .hljs-title,.dark .execution-output-content .hljs-type{color:#7aa2f7}.dark .execution-output-content .hljs-string,.dark .execution-output-content .hljs-subst,.dark .execution-output-content .hljs-regexp,.dark .execution-output-content .hljs-link,.dark .execution-output-content .hljs-addition,.dark .execution-output-content .hljs-selector-id,.dark .execution-output-content .hljs-selector-class{color:#9ece6a}.dark .execution-output-content .hljs-built_in,.dark .execution-output-content .hljs-bullet,.dark .execution-output-content .hljs-code,.dark .execution-output-content .hljs-formula{color:#7dcfff}.dark .execution-output-content .hljs-emphasis{font-style:italic}.dark .execution-output-content .hljs-strong{font-weight:bold}

/* ========================================================================== */
/* 16. Utilities & Animations                                               */
/* ========================================================================== */

/* Display Utilities */
.display-none { @apply hidden; }
.hidden { display: none; } /* Ensure basic hidden works */
/* Dark Mode Specific Display (used in Code Block icons) */
.dark .dark\:hidden { display: none; }
.dark .dark\:inline { display: inline; }
html:not(.dark) .light\:hidden { display: none; } /* Utility to hide only in light mode */
html:not(.dark) .light\:inline { display: inline; } /* Utility to show only in light mode */


/* Feather Icon Size Utility */
.feather-small { @apply w-3.5 h-3.5 inline-block align-middle; } /* Slightly larger */

/* Keyframes */
@keyframes shimmer { /* For active menu item */
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes bounce { /* For feather emoji */
  0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes matrix-rain { /* For context menu (optional - kept green for example, adapt if needed) */
  0% { background-position: 0 0; }
  100% { background-position: 0 1000px; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bubble-in-down { /* For thought bubble */
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes pulse-border { /* For pending spinner */
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } /* Light: --color-primary (amber-500) */
  50% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0); }
}
.dark @keyframes pulse-border {
   0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4); } /* Dark: orange-400 */
   50% { box-shadow: 0 0 0 3px rgba(251, 146, 60, 0); }
}
@keyframes step-slide-in { /* For step items */
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fall { /* For optional falling object animation */
  from { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  to { transform: translateY(calc(100vh + 30px)) rotate(360deg); opacity: 0.5; } /* Fade out at end */
}

/* Animation Utility Classes */
.animate-bounce { animation: bounce 1.5s infinite ease-in-out; } /* Slower bounce */
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse-border { animation: pulse-border 1.5s infinite cubic-bezier(0.66, 0, 0, 1); }
.animate-step-slide-in { animation: step-slide-in 0.4s ease-out forwards; } /* Slower slide */
.animate-fall { animation: fall linear infinite; }

/* Transition Utilities (Vue <transition>) */
@layer utilities {
  /* Generic Fade */
  .fade-enter-active, .fade-leave-active { @apply transition-opacity duration-300 ease-out; }
  .fade-enter-from, .fade-leave-to { @apply opacity-0; }

  /* Icon Fade & Scale (for Step icons) */
  .fade-icon-enter-active, .fade-icon-leave-active {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }
  .fade-icon-enter-from, .fade-icon-leave-to { opacity: 0; transform: scale(0.7); } /* Start smaller */
  .fade-icon-enter-to, .fade-icon-leave-from { opacity: 1; transform: scale(1); }

  /* Thought Bubble Animation */
  .animate-bubble-in-down {
    animation-name: bubble-in-down;
    animation-duration: 0.25s; /* Faster bubble */
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Slide Transitions */
  .slide-right-enter-active, .slide-right-leave-active { transition: transform 0.3s ease-out; }
  .slide-right-enter-from, .slide-right-leave-to { transform: translateX(-100%); }

  .slide-left-enter-active, .slide-left-leave-active { transition: transform 0.3s ease-out; }
  .slide-left-enter-from, .slide-left-leave-to { transform: translateX(100%); }

  /* List Transitions (e.g., Discussions) */
  .discussionsList-move,
  .discussionsList-enter-active,
  .discussionsList-leave-active { transition: all 0.35s ease; } /* Slightly longer */
  .discussionsList-enter-from { opacity: 0; transform: translateX(-25px); }
  .discussionsList-leave-to { opacity: 0; transform: translateX(25px); }
  .discussionsList-leave-active { position: absolute; width: calc(100% - 1rem); /* Needs adjustment based on parent padding */ }

  .list-move,
  .list-enter-active,
  .list-leave-active { transition: all 0.4s ease; } /* Generic list transition */
  .list-enter-from { opacity: 0; transform: translateY(-20px); }
  .list-leave-to { opacity: 0; transform: translateY(20px); }
  .list-leave-active { position: absolute; width: calc(100% - 1rem); /* Adjust width */ }

   /* Fade and Fly Up */
  .fade-and-fly-enter-active, .fade-and-fly-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .fade-and-fly-enter-from, .fade-and-fly-leave-to {
    opacity: 0;
    transform: translateY(10px); /* Fly from bottom */
  }
}

/* Animated Thought Bubble Component (Tooltip) */
@layer components {
  .animated-thought-bubble {
    @apply absolute bottom-[calc(100%+6px)] left-1/2 /* Position above parent + arrow space */
           opacity-0 invisible group-hover/item:opacity-100 group-hover/item:visible group-hover/item:pointer-events-auto /* Group hover control */
           bg-stone-700 dark:bg-stone-200 /* Inverted colors for contrast */
           text-white dark:text-stone-800
           rounded-md shadow-lg px-2.5 py-1.5 text-xs z-50 /* Style */
           w-max max-w-[180px] /* Size */
           transform -translate-x-1/2 /* Center */
           origin-bottom /* Animate from bottom */
           transition-opacity duration-150 /* Smooth fade */
           group-hover/item:animate-bubble-in-down; /* Apply animation */
  }

  .animated-thought-bubble::after { /* Arrow */
    content: '';
    @apply absolute top-full left-1/2 transform -translate-x-1/2
           border-[6px] border-solid border-transparent
           border-t-stone-700 dark:border-t-stone-200; /* Arrow color matches bubble */
  }
}

/* Line Clamp Utility */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================================================== */
/* End of Theme                                                             */
/* ========================================================================== */